<template>
  <div class="page">
    <navigation>{{ $t('订单记录') }}</navigation>
    <div class="tab-tit" >
      <div v-for="(item, index) in menuList" :key="index" class="item">
        <button class="btn" :class="{active: activeIndex === index}" @click="switchTab(index, item.status)">{{ $t(item.name) }}</button>
      </div>
    </div>
    <div class="tab-desc">
      <order-list :status="menuList[activeIndex].status" />
    </div>
  </div>
</template>
<script>
import navigation from '@/components/Navigation'
import orderList from '@/components/partials/otc/order-status/OrderList'
export default {
  components: { navigation, orderList },
  data () {
    const menuList = [{
      name: '未付款',
      status: 2
    }, {
      name: '已付款',
      status: 3
    }, {
      name: '申诉中',
      status: 11
    }, {
      name: '已取消',
      status: 0
    }, {
      name: '已完成',
      status: 1
    }, {
      name: '申诉已处理',
      status: 12
    }]
    let activeIndex = 0
    const status = Number(this.$route.query.status) || menuList[activeIndex].status
    menuList.forEach((item, index) => {
      if (item.status === status) {
        activeIndex = index
      }
    })

    return {
      menuList,
      activeIndex,
      status
    }
  },
  methods: {
    switchTab (index, status) {
      if (this.activeIndex === index) { return }
      this.activeIndex = index
      const path = `?status=${status}`
      this.$router.replace(path)
    }
  }
}
</script>
<style scoped>
.tab-tit {
  position: fixed;
  top: 90px;
  left: 0;
  width: 100%;
  height: 40px;
  background: #eee;
  overflow-x: auto;
  white-space: nowrap;
}
.tab-tit::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
.tab-tit .item {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  min-width: 20%;
}
.tab-tit .btn {
  padding: 0 15px;
  line-height: 40px;
  background: transparent;
}
.tab-tit .btn.active {
  position: relative;
  color: #1b8afe;
}
.tab-tit .btn.active:after {
  content: '';
  position: absolute;
  bottom: 0;left: 0;
  width: 100%;
  height: 0;
  border-bottom: 2px solid #1b8afe;
}
.tab-desc {margin-top: 40px;}
</style>
